<template>
  <div class="testScore">
    <div class="common_showBox bx" :class="noticeFlag?'active':''">
      <transition name="fade">
        <div class="common_searchBox br mb14" v-show="noticeFlag">
          <div class="searchBox longBox bx">
            <img src="static/images/search.png" alt="" srcset="">
            <input type="text" placeholder="搜索学号" @keydown.13="queryBtn" v-model="key">
          </div>
          <div class="queryBtn" @click="queryBtn">查询</div>
          <span class="ml30" v-if="isYear">年级：</span>
          <div class="chooseBox bx down w180" v-if="isYear">
            <selectMk :liDataGet="yearData" @change="change" dataType='year_name' v-if="yearData.length>0"></selectMk>
          </div>
          <span class="ml30" v-if="isClass">班级：</span>
          <div class="chooseBox bx down w180" v-if="isClass">
            <selectMk :liDataGet="classData" @change="change" dataType='class_name' v-if="classData.length>0"></selectMk>
          </div>

        </div>
      </transition>
      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">考试成绩信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click='openLayer'>新增考试</div>
            <div class="common_title_btn">
              <a :href="downUrl" download="exam_template.csv">下载模版</a>
            </div>
          </div>
        </div>
        <div class="testScoreDataBox br bx" v-if="noticeFlag" :class="updateFileFlag?'active':''">
          <div class="common_title bx">
            <div class="common_title_left">考试成绩信息</div>
            <div class="common_title_right">
              <div class="common_title_btn updateBtn" @click="openFile">导入信息
                <!-- <input name="file" type="file" @change="chooseFile" /> -->
              </div>
              <div class="common_title_btn" @click='cancelBtn'>返回</div>
            </div>
          </div>
          <el-table ref="multipleTable" :data="testScoreData" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange"
            :default-sort="{prop: 'info.student_no', order: 'descending'}" :row-class-name='chooseFilter'>

            <el-table-column label="名次" type="index" width="60"></el-table-column>
            <el-table-column prop="info.student_no" label="学号" sortable data-id='1' show-overflow-tooltip></el-table-column>
            <el-table-column prop="info.name" label="学生" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="class_name" label="年级" sortable show-overflow-tooltip></el-table-column>
            <el-table-column label="科目">
              <el-table-column :label="item.course_name" :prop="item.course_name" sortable v-for="(item, index) in courseList" :key="index" show-overflow-tooltip></el-table-column>
            </el-table-column>
            <el-table-column prop="total" label="总分" sortable show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
        <div class="common_form bx" ref="common_form">
          <el-table ref="multipleTable" :data="testScoreDataList" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column label="" width='100'></el-table-column>
            <el-table-column label="考试名称" prop="exam_name" class-name='clickCell' show-overflow-tooltip></el-table-column>
            <el-table-column prop="typeText" label="考试对象" show-overflow-tooltip></el-table-column>
            <el-table-column prop="create_time" label="更新时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="clickBtn clickCellBtn" @click="handleLook(scope.$index, scope.row)">详情</span>
                <span class="clickBtn" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页"  @click="minPageFlag &&lastPage()"
              class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()"
              class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="common_alertBox  addExam" v-if='addExamFlag'>
      <div class="common_alertBox_header">
        <span>新增考试</span>
      </div>
      <!-- <div class="common_alertBox_header" >
          <span>修改通知</span>
        </div> -->
      <div class="common_alertBox_content">
        <div class="common_alertBox_li alert_center ">
          <div class="common_alertBox_li_alert_center ">
            <span class="importentIcon">考试名称：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="pushExamData.newExamName">
            </div>
          </div>

        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">考试范围</span>
            <div class="chooseBox  down hideInput">

              <div class="maskIpnut">{{pushExamData.typeText}}</div>

              <selectMk :liDataGet="examType" @change="change" dataType='examType'></selectMk>
            </div>


          </div>
          <div class="common_alertBox_li_right ">
            <span v-if='pushExamData.typeNum==2'>指定年级</span>
            <!-- <div class="chooseBox  down hideInput" v-if='pushExamData.typeNum==2'> -->
            <div class="chooseBox  down hideInput" v-show='pushExamData.typeNum==2'>
              <div class="maskIpnut">{{pushExamData.chooseYearName}}</div>
              <selectMk :liDataGet="yearData" @change="change" dataType='year_name' v-if="yearData.length>0"></selectMk>
            </div>
            <span v-if='pushExamData.typeNum==3'>指定班级</span>
            <div class="chooseBox  down hideInput" v-show='pushExamData.typeNum==3'>
              <div class="maskIpnut">{{pushExamData.class_name}}</div>
              <selectMk :liDataGet="classData" @change="change" dataType='class_name' v-if="classData.length>0"></selectMk>
            </div>

          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span>开始时间：</span>
            <div class="chooseBox paddingInput date">
              <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="pushExamData.startTime">
              </el-date-picker>

            </div>


          </div>
          <div class="common_alertBox_li_right ">
            <span>结束时间：</span>
            <div class="chooseBox paddingInput date">
              <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="pushExamData.endTime">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addNewExam" @click="addNewExamClick">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>

      </div>
    </div>
    <div class="common_alertBox updateFilebox" v-if="updateFileFlag">
      <div class="common_alertBox_header">
        <span>导入信息</span>
      </div>
      <div class="common_alertBox_content pushFileBox" v-if="!updateFileSuccessFlag">


        <div class="common_alertBox_li_right  chooseClassBox">
          <span class="importentIcon" v-if="chooseYearFlag">年级:</span>
          <div class="chooseBox  down hideInput" v-if="chooseYearFlag">
            <div class="maskIpnut">{{pushExamData.chooseYearName}}</div>
            <selectMk :liDataGet="yearData" @change="change" dataType='year_name' v-if="yearData.length>0"></selectMk>
          </div>
          
          <div v-if="!chooseYearFlag" class="showInput">{{chooseInput}}</div>
        </div>
        <div class="pushFile  ">{{fileData.name}}
          <input name="file" type="file" @change="chooseFile" />
        </div>

        <ul>仅支持csv格式
          <li>
            <span class="green">必填字段</span>班级名称,学生学号</li>
          <li>
            <span class="green">班级名称</span> 示例:2班 </li>
        </ul>



      </div>
      <div class="common_alertBox_footer" v-if="!updateFileSuccessFlag">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click='sureUpdateFile'>确定</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click='cancelBtn'>取消</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="sureUpdateFileFlag" @click="sureUpdateFile">确定</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn1">取消</el-button>
      </div>
      <div class="common_alertBox_content" v-if="updateFileSuccessFlag">
        <span>总共{{updateFileSuccessData.data.total}}条</span>
        <span class="green">成功{{updateFileSuccessData.data.success}}条</span>
        <span class="red">失败{{updateFileSuccessData.data.failed}}条</span>
        <div v-if="updateFileSuccessData.data.failed>0">
          <!-- <div v-for="(item, index) in updateFileSuccessData.data.failedList" class="red"> -->
          <!-- 失败原因:{{item.data}}({{item.reason}}) -->
          <div class="thead">
            <div class="th">错误信息</div>
            <div class="th">错误原因</div>
          </div>
          <div class="tbody">
            <div class="tr" v-for="(item, index) in updateFileSuccessData.data.failedList">
              <div class="td">{{item.data}}</div>
              <div class="td">{{item.reason}}</div>
            </div>
          </div>

          <!-- </div> -->
        </div>
      </div>
      <div class="common_alertBox_footer" v-if="updateFileSuccessFlag">
        <div class="common_alertBox_footer_btn sureBtn" @click='closeUpdateFileFlag'>确定</div>
        <div class="common_alertBox_footer_btn cancelBtn" @click='cancelBtn'>取消</div>
      </div>
    </div>


  </div>


</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        chooseYearFlag: false,
        addExamFlag: false,
        addNewExam: false,
        key: '',
        yearData: [],
        classData: [],
        exam_id: '',
        pushExamData: {
          newExamName: '',
          typeText: '全年级',
          typeNum: 1,
          chooseYearName: '',
          chooseYearId: '',
          chooseYearType: '',
          class_name: '',
          class_id: '',
          startTime: '',
          endTime: ''
        },
        examType: [{
          value: '全年级',
          type: 1
        }, {
          value: '指定年级',
          type: 2
        }, {
          value: '指定班级',
          type: 3
        }],
        liDataGet1: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        noticeFlag: false,
        width: '',
        class_id: '',
        downUrl: '',
        isYear: false,
        isClass: false,
        testScoreData: [],
        addClassFlag: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        sureUpdateFileFlag: false,
        chooseInput:'',
        page: 1, //初始页数
        pagesize: 12, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        testScoreDataList: [], //接收数据
        courseList: [],
        getClassDataGrade: '',
        multipleSelection: [], //多选按钮
        fileData: {
          name: '选取文件'
        },
        updateFileFlag: false,
        updateFileSuccessFlag: false,
        updateFileSuccessData: {},
        handleLook(index, row) { //修改事件

          this.noticeFlag = !this.noticeFlag;
          let _this = this;
          _this.exam_id = row.id;
          _this.pushExamData.chooseYearId = this.yearData[0].year;
          _this.chooseInput = row.typeText;
          _this.pushExamData.chooseYearType = '';
          _this.classData = [{
            value: '请选择',
            id: ''
          }];
          // _this.classQueryData=[];
          switch (row.type) {
            case '1':
              _this.pushExamData.chooseYearType = row.type;
              _this.isYear = true;
              _this.isClass = true;
              _this.chooseYearFlag = true;
              break;
            case '2':
              _this.isClass = true;
              _this.getClassDataGrade = row.target_value;
              _this.getClassData();
              break;
            case '3':
              ;
              break;
          }

          _this.getExamData(row.id)


        },

        handleDelete(index, row) { //删除事件


          var _this = this;
          this.$confirm('此操作将永久删除' + row.exam_name + ', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    },

    methods: {
      openFile() {
        this.updateFileFlag = true;
        $('.mask').show();
      },
      getExamData(id) {
        let _this = this;

      },
      queryBtn() {

      },
      chooseFilter(e) {
        let str = 'nomal ' + (e.row.classFilter ? 'classActive' : '') + ' ' + (e.row.yearFilter ? 'yearActive' : '');

        return str;

      },
      yearFilterFalse() {
        this.testScoreData.map((e) => {
          e.yearFilter = false;

        })
      },
      classFilterFalse() {
        this.testScoreData.map((e) => {

          e.classFilter = false;
        })
      },
      change: function (e) { //下拉框插件改变
        switch (e.dataType) {
          case 'examType':
            this.pushExamData.typeText = e.val;
            this.pushExamData.typeNum = e.type;

            break;
          case 'year_name':
            this.pushExamData.chooseYearName = e.val;
            this.pushExamData.chooseYearId = e.year;
            this.pushExamData.chooseYearType = e.type;
            if (this.noticeFlag) { //如果是详情页面

              this.classData = [];
              this.getClassDataGrade = e.year;
              this.getClassData();

              this.yearFilterFalse(); //重置
              this.testScoreData.map((eScore) => {
                if (eScore.info.start_year == e.year) {
                  eScore.yearFilter = true;
                } else if (e.year == '') {
                  eScore.yearFilter = true;
                }
              })
            }


            break;
          case 'class_name':
            this.pushExamData.class_name = e.val;
            this.pushExamData.class_id = e.id;
            if (this.noticeFlag) { //如果是详情页面
              this.classFilterFalse(); //重置
              this.testScoreData.map((eScore) => {
                if (eScore.info.class_id == e.id) {
                  eScore.classFilter = true;
                };
              })

            }
            break;
        }

      },
      closeUpdateFileFlag() {
        this.updateFileFlag = false;
        this.updateFileSuccessFlag = false;
        let _this = this;
        $('.mask').hide();
        _this.getExamData(_this.exam_id)
        // _this.cancelBtn();
        // setTimeout(function(){ _this.noticeFlag = !_this.noticeFlag;},500)



        this.pushExamData.chooseYearId = this.yearData[0].year;
        this.pushExamData.chooseYearName = this.yearData[0].value;




      },
      addNewExamClick() {
        var _this = this;
        var exam_name = _this.pushExamData.newExamName;
        var type = _this.pushExamData.typeNum;
        var class_type = '';
        var target_value = '';
        switch (type) {
          case 1:
            target_value = 0;
            break;
          case 2:
            target_value = _this.pushExamData.chooseYearId;
            class_type = _this.pushExamData.chooseYearType;
            break;
          case 3:
            target_value = _this.pushExamData.class_id;
            class_type = _this.pushExamData.chooseYearType;
            break;
        }
        var start_time = _this.pushExamData.startTime;
        var end_time = _this.pushExamData.endTime;
        _this.addNewExam = true;

      },
      getClassData() {
        var year = (new Date()).getFullYear();
        var _this = this;
        var grade = this.getClassDataGrade;
 


      },
      getYearData() {
        var _this = this;




      },
      chooseType(e) {
        switch (e) {
          case '1':
            return '小学';
            break;
          case '2':
            return '初中';
            break;
          case '3':
            return '高中';
            break;
        }
      },
      sureUpdateFile() {
        let param = new FormData();

        let file = this.fileData;
        let exam_id = this.exam_id;

        if (file.name == '选取文件') {
          this.$message({
            message: '请选取文件',
            type: 'error'
          });
          return
        }
        if (this.pushExamData.chooseYearType) {

          let class_type = this.pushExamData.chooseYearType;
          let grade = this.pushExamData.chooseYearId;
          param.append('class_type', class_type)
          if (grade == '') {
            this.$message({
              message: '请选择年级',
              type: 'error'
            });
            return
          }
          param.append('grade', grade)

        }

        // console.log('exam_id', exam_id)
        param.append('upload_file', file, file.name) // 通过append向form对象添加数据
        param.append('exam_id', exam_id)


        var _this = this;
        _this.sureUpdateFileFlag = true;
        let path = '' + window.location;
        path = path.split('#')[1];
        $.ajax({
          url: http.importExam,
          type: "POST",
          data: param,
          headers: {
            'Authorization': _this.$store.state.Authorization + ',path="' + path + '"'
          },
          /**
           *必须false才会自动加上正确的Content-Type
           */
          contentType: false,
          /**
           * 必须false才会避开jQuery对 formdata 的默认处理
           * XMLHttpRequest会对 formdata 进行正确的处理
           */
          processData: false,
          success: function (data) {
            switch (data.status) {
              case 200:

                _this.updateFileSuccessData = data;
                _this.updateFileSuccessFlag = true;
                _this.$message({
                  message: data.message,
                  type: 'success'
                });
                break;
              case 400:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                break;
              case 402:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                break;
              case 500:

                _this.$message({ //失败返回
                  message: data.message,
                  type: 'error',
                  duration: 1666
                });
                localStorage.removeItem('classlist');
                localStorage.removeItem('info');
                localStorage.removeItem('token');
                _this.$router.push({
                  path: '/login'
                });
                break;
            }
            _this.sureUpdateFileFlag = false;

          },
          error: function (data) {
            _this.sureUpdateFileFlag = false;

          }
        });
      },
      chooseFile(e) {
        var _this = this
        let file = e.target.files[0];
        if (file) {
          _this.fileData = file;
        }


      },
      openLayer() { //显示添加班级弹窗
        this.addExamFlag = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮

      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      console(row) {

        this.noticeFlag = !this.noticeFlag;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        var page = 0;
        var pagesize = 0;
        var class_id = this.class_id;
        let _this = this;


      },

      checkClass(id) {
        var text = ''
        this.classData.map((e, i) => {

          if (e.id == id) {
            text = e.value;

            return;
          }
        })
        return text;
      },

      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      cancelBtn() { //取消按钮

        this.noticeFlag = false;
        this.updateFileFlag = false;
        this.sureUpdateFileFlag = false;
        this.updateFileSuccessFlag = false;
        this.addExamFlag = false;
        this.addNewExam = false;
        this.addExamFlag = false;
        this.chooseYearFlag = false;
        this.isYear = false;
        this.isClass = false;
        this.class_id = '';
        this.fileData = {
          name: '选取文件'
        }
        this.pushExamData = {
            newExamName: '',
            typeText: '全年级',
            typeNum: 1,
            chooseYearName: '请选择',
            chooseYearId: '',
            chooseYearType: '',
            class_name: '',
            class_id: '',
            startTime: '',
            endTime: ''
          },
          $('.mask').hide();

      },
      cancelBtn1() { //取消按钮
        this.updateFileFlag = false;
        this.pushExamData = {
            newExamName: '',
            typeText: '全年级',
            typeNum: 1,
            chooseYearName: '请选择',
            chooseYearId: '',
            chooseYearType: '',
            class_name: '',
            class_id: '',
            startTime: '',
            endTime: ''
          },
          $('.mask').hide();

      },
      setTeacherSureBtn() { //设置教师确定按钮
        alert('保存成功')
        this.setTeacherFlag = false;
        $('.mask').hide();
      },
      addClassSureBtn() { //添加班级确定按钮
        alert('保存成功')
        this.addClassFlag = false;
        $('.mask').hide();
      },
      jq() {
        $('.common_form ').on('click', 'td.clickCell', function () {
          $(this).parent().find('.clickCellBtn').click()
        })
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }


  .importentIcon::before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../../static/images/importent.png');
  }



  .common_alertBox_li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }


  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }


  .disableClick {
    color: #bebebe;
  }



  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }



  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .testScore {
    height: 100%;
  }

  .common_alertBox_li_alert_center .chooseBox {
    width: 500px;
  }

  .testScoreDataBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 1000;
    padding: 60px 0 25px 0;
    text-align: center;
  }

  .testScoreDataBox.active {
    /* z-index: -1; */
  }

  .common_showBox {
    padding-top: 0px;
    transition: all 0.5s;
  }

  .common_showBox.active {
    padding-top: 90px;
  }

  .common_titleBox {
    z-index: 0;
  }

  .common_alertBox_li_alert_center {
    justify-content: flex-end;
  }

  /* 更正 */

  .common_alertBox_footer {
    padding: 35px 275px;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }

  .common_alertBox_li_alert_center .chooseBox {
    width: 594px;
  }

  .pushFileBox {
    position: relative;
    padding: 0 100px;

  }

  .pushFile {
    margin: 50px auto 0;
    width: 30%;
    height: 42px;
    line-height: 42px;
    font-size: 28px;
    background: #1985ce;
    border-radius: 18px;
    color: #fff;
    position: relative;

  }

  .pushFileBox input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .pushFileBox ul {
    text-align: left;
    border-top: 1px solid #333;
    margin-top: 10px;
    position: relative;
  }

  .pushFileBox ul li span.green {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 20px;
  }

  .common_alertBox_footer {
    padding: 35px 275px;
  }

  .common_alertBox_content.updataBox {
    max-height: 300px;
    overflow: auto;
  }

  .chooseClassBox {
    width: 23%;
    position: absolute;
    left: 50%;
    top: -20%;
    transform: translate(-50%, -50%);
    z-index: 100;

  }

  .chooseClassBox .chooseBox {
    width: 150px;
  }

  .showInput{
    width: 100%;
    font-size: 20px;
    text-align: center;
  }

</style>
